<template>
  <div>
    <div class="naviPane">
      <div class="logo">
        <a href="/">
          <img src="../../../../static/images/front/logo22.png" alt="">
        </a>
      </div>
      <div class="naviInfo">
        <ul>
          <li>我的首页</li>
          <li>首页</li>
          <li class="mainMenu">账户设置
            <ul class="subMenu">
              <li>安全设置+
                <ul class="thirdMenu">
                  <li><a href="#">修改账户密码</a></li>
                  <li><a href="#">手机绑定</a></li>
                  <li><a href="#">其他</a></li>
                </ul>
              </li>
            </ul>
            <ul class="subMenu">
              <li>个人资料+
                <ul class="thirdMenu">
                  <li><a href="#">修改头像、昵称</a></li>
                </ul>
              </li>

            </ul>
            <ul class="subMenu">
              <li>账号绑定+
                <ul class="thirdMenu">
                  <li><a href="#">微信绑定</a></li>
                  <li><a href="#">支付宝绑定</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <el-button type="primary" style="background-color:#ca151c;border :solid 0px ;height: 30px;font-size: 14px;line-height: 5px;margin-left: 100px"><a href="/login" style="text-decoration: none;color: white;">注销</a></el-button>

        </ul>

      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "navi"
  }
</script>

<style scoped lang="stylus">


  .naviPane
    position relative
    z-index 2
    :after
      clear: both;
      content: "";
      display: block
    background-color #b90013
    height 80px
    width 1000px
    margin 0 auto
    .naviInfo
      height 80px
      line-height 80px
      width 705px
      float left
      ul
        margin 0
        padding 0
        :after {
          clear: both;
          content: "";
          display: block
        }
        line-height 80px
        list-style none
        .mainMenu
          &:hover
            .subMenu
              display block
          position: relative;
        li
          color white
          width 150px
          height 50px
          float left
          ul
            display none
            &:hover
              .thirdMenu
                display block
            li
              background-color #ca151c
              color white
              line-height 50px
              text-align center

              ul
              .thirdMenu
                position absolute
                top 80px
                left 150px
                background-color #ca151c
                width 150px
                height 150px
                display none
                li
                  a

                    color #ffffff
                    text-decoration none






    .logo
      margin 5px 0 0 15px
      width 280px
      height 70px
      float left
      a
        text-decoration: none
        color #ffffff

      img
        width 70px
        height 70px

</style>
